import React, {Component,useState} from 'react';
import Top from "./top.jsx";
import Body from "./body.jsx";
import Foot from "./foot.jsx";
import {nanoid} from 'nanoid'
import './todoList.scss'

class TodoList extends Component {
    state = {
        dataList: [
            {
                id: 1,
                title: '睡觉',
                status: false //false=没完成 true=已完成
            },
            {id: 2, title: '吃饭', status: true},
            {id: 3, title: '打豆豆', status: false},
        ] //任务列表
    }

    render() {
        return (
            <div className="todo-list-body">
                <div className="item top">
                    <Top addItem={this.addItem}/>
                </div>
                <div className="item list">
                    <Body delItem={this.delItem} editStatus={this.editStatus} data={this.state.dataList}/>
                </div>
                <div className="item fool">
                    <Foot data={this.state.dataList} editStatus={this.editStatus} delItem={this.delItem}/>
                </div>
            </div>
        );
    }

    /**
     * 添加一条数据
     * @param title
     */
    addItem = (title) => {
        this.setState({
            dataList: [...this.state.dataList, {id: nanoid(), title, status: false}]
        })
    }

    /**
     * 编辑状态
     * @param   ids  //id列表
     * @param status 设置状态
     */
    editStatus = (ids, status) => {
        this.setState({
            dataList: this.state.dataList.map(item => {
                if (ids.includes(item.id)) {
                    item = {...item,status:status}
                }
                return item
            })
        })
    }
    /**
     * 删除完成的任务
     * @param ids id列表
     */
    delItem = (ids) => {
        this.setState({
            dataList: this.state.dataList.filter(item => !ids.includes(item.id))
        })
    }
}

export default TodoList;